<template>
  <div class="communityRight-box">
    <!-- 圈主 -->
    <div class="token" v-if="quanzhu && ringmaster[0]">
      <div class="tokentitle">圈主</div>
      <div class="tokenitem f-a-c" @click.stop="toUserInfo(ringmaster[0])">
        <div class="actice" style="position: relative">
          <img :src="ringmaster[0].user_avatar" alt="" />
          <!-- <svg-icon
            name="icon-dav"
            style="
              width: 20px;
              height: 20px;
              margin-left: 5px;
              position: absolute;
              bottom: 0;
              right: 0;
            "
            v-if="ringmaster[0].is_authentication == 1"
          ></svg-icon> -->
        </div>

        <div class="name f-d-c">
          <div class="f-a-c namefou f-j-sb-a-c">
            <span>{{ ringmaster[0].user_name }}</span>
            <!-- <div class="fouct click f-j-a-c">关注</div> -->
          </div>

          <span class="ellipsis">{{ ringmaster[0].user_introduce }}</span>
        </div>
      </div>
    </div>
    <!-- 简介 -->
    <div class="intro" v-if="intro">
      <div class="introtitle">简介</div>
      <div class="introcontent ellipsis2">
        {{ circleInfo.circle_introduce }}
      </div>
      <div class="introtime">创建时间:{{ circleInfo.created_at }}</div>
    </div>
    <!-- 成员 -->
    <div class="Member" v-if="Member">
      <div class="membertitle">
        成员 <span>{{ circlyDatalist.length }}</span>
      </div>
      <div
        class="tokenitem f-a-c"
        v-for="(item, index) in circlyDatalist"
        :key="index"
        @click.stop="toUserInfo(item)"
      >
        <div class="actice">
          <img :src="item.user_avatar" alt="" />
        </div>
        <div class="name f-d-c">
          <div class="f-a-c namefou f-j-sb-a-c">
            <span>{{ item.user_name }}</span>
            <div
              v-if="userInfo.id !== item.id"
              class="fouct click f-j-a-c"
              :class="item.is_follow_user ? 'canjoin' : ''"
              @click.stop="gofollowNow(item)"
            >
              {{ item.is_follow_user ? "已关注" : "关注" }}
            </div>
          </div>

          <span class="ellipsis">{{ item.user_introduce }}</span>
        </div>
      </div>
    </div>

    <!-- 个人成就 -->
    <div class="Personal" v-if="Personal">
      <div class="Personaltitle">个人成就</div>
      <div
        class="Personalitem f-a-c"
        v-for="(item, index) in PersonalList"
        :key="index"
      >
        <svg-icon style="margin-right: 10px" :name="item.svg"></svg-icon>
        <span>{{ item.title }}</span>
        <span>{{ PersonalData[item.key] }}</span>
        <span>{{ item.title1 }}</span>
      </div>
    </div>
    <!-- 数据总览 -->
    <div class="Personal" v-if="DataOverview">
      <div class="Personaltitle">数据总览</div>
      <div
        class="Personalitem f-a-c f-j-sb-a-c"
        v-for="(item, index) in DataOverviewlist"
        :key="index"
      >
        <!-- <svg-icon style="margin-right: 10px" :name="item.svg"></svg-icon> -->
        <span>{{ item.title }}</span>
        <span>{{ item.num }}</span>
      </div>
    </div>
    <!-- TA加入的 -->
    <!-- <div class="hejoin" v-if="hejoin">
      <div class="hejointitle">TA加入的</div>
      <div class="hejoinbox">
        <div class="huati click">
          话题 <svg-icon name="icon-gd-sq"></svg-icon>
        </div>
        <div class="huatiitem f-a-c f-j-sb-a-c">
          <div
            class="huatispan f-j-a-c"
            v-for="(item, index) in 4"
            :key="index"
          >
            #AI-精品扩散模型#
          </div>
        </div>
      </div>
      <div class="hejoinbox">
        <div class="huati click">
          圈子 <svg-icon name="icon-gd-sq"></svg-icon>
        </div>
        <div class="quanzibox">
          <div class="quanitem f-a-c" v-for="(item, index) in 3" :key="index">
            <div class="left">
              <img
                src=" https://i-desai.oss-cn-hangzhou.aliyuncs.com//upload/1686800462862微信图片_20230615113315.jpg?x-oss-process=image/resize,w_600/format,webp"
                alt=""
              />
            </div>
            <div class="right">
              <div class="quanzitop">
                <span>Stable Diffusion影视动画</span>
              </div>
              <div class="quanzibottom f-a-c">
                <span>笔记：126</span>
                <span>成员：56</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div> -->
    <!-- 话题发起人 -->
    <div class="token" v-if="token && speak.circle_user">
      <div class="tokentitle">话题发起人</div>
      <div class="tokenitem f-a-c">
        <div class="actice">
          <img :src="speak.circle_user.user_avatar" alt="" />
        </div>
        <div class="name f-d-c">
          <div class="f-a-c namefou f-j-sb-a-c">
            <span>{{ speak.circle_user.user_name }}</span>
            <div
              class="fouct click f-j-a-c"
              :class="is_follow_user ? 'canjoin' : ''"
              @click.stop="gofollowNow(speak.circle_user)"
            >
              {{ is_follow_user ? "已关注" : "关注" }}
            </div>
          </div>

          <span class="ellipsis">{{ speak.circle_user.user_introduce }}</span>
        </div>
      </div>
    </div>
    <!-- 热门话题 -->
    <div class="communitybox" v-if="hot">
      <div class="communityspan">热门帖子</div>
      <div class="communityitem ellipsis">
        <div
          class="item f-a-c"
          v-for="(item, index) in communityList"
          :key="index"
          @click="toCommunityDetail(item)"
        >
          <div class="font f-a-c">
            <span :style="{ color: item.color }">{{ index + 1 }}</span>
            <span class="ellipsis" style="display: block; width: 200px">{{
              item.posts_content_raw
            }}</span>
          </div>
          <span class="type" :style="{ 'background-color': item.color }">{{
            item.hot == true ? "热" : "新"
          }}</span>
        </div>
      </div>
      <div class="morehottitle click f-j-a-c f-a-c" @click="gohot">
        <span>更多热门帖子</span>
        <svg-icon name="icon-sq-gd"></svg-icon>
      </div>
    </div>
    <!-- 圈子 -->
    <div
      class="friendcommunity"
      v-if="friendcommunity"
      :class="!hot ? 'nomargin' : ''"
    >
      <div class="frendtitle f-j-sb-a-c">
        <div
          class="frienditem click"
          v-for="(item, index) in circleList"
          :key="index"
          @click="circleListClick(item, index)"
          :class="circleCurrent == index ? 'frendcolor' : ''"
        >
          {{ item.title }}
        </div>
      </div>
      <div class="friendbox">
        <div
          class="boxitem"
          :style="{ 'background-image': 'url(' + item.background_maps + ')' }"
          v-for="(item, index) in circlemap"
          :key="index"
          @click="toCircleDetail(item)"
        >
          <div class="mobanbox"></div>
          <div class="contentitem">
            <div class="contenttitle">
              {{ item.circle_name }}
            </div>
            <div class="avatar f-a-c">
              <div
                class="avatarimg"
                v-for="(items, indexs) in item.avatar"
                :key="indexs"
              >
                <img :src="items.img" alt="" />
              </div>
            </div>
            <div
              class="rightType f-j-a-c"
              v-if="circleCurrent != 2 && circleCurrent != 1"
            >
              <span>最热</span>
            </div>
            <div class="infocontent f-a-c">
              <!-- 我创建的圈子 -->
              <span v-if="circleCurrent == 2"
                >{{
                  item.post_count > 10000
                    ? item.post_count / 10000 + "W"
                    : item.post_count > 1000
                    ? item.post_count / 1000 + "K"
                    : item.post_count
                }}篇帖子</span
              >
              <!-- 推荐圈子 -->
              <span v-if="circleCurrent == 0"
                >{{
                  item.circle_state > 10000
                    ? item.circle_state / 10000 + "W"
                    : item.circle_state > 1000
                    ? item.circle_state / 1000 + "K"
                    : item.circle_state
                }}篇帖子</span
              >
              <!-- 我加入的 -->
              <span v-if="circleCurrent == 1"
                >{{
                  item.circle_posts_count > 10000
                    ? item.circle_posts_count / 10000 + "W"
                    : item.circle_posts_count > 1000
                    ? item.circle_posts_count / 1000 + "K"
                    : item.circle_posts_count
                }}篇帖子</span
              >
              <!-- 我创建的圈子 -->
              <span v-if="circleCurrent == 2 || circleCurrent == 0"
                >{{
                  item.user_circle_count > 10000
                    ? item.user_circle_count / 10000 + "W"
                    : item.user_circle_count > 1000
                    ? item.user_circle_count / 1000 + "K"
                    : item.user_circle_count
                }}人加入</span
              >
              <!-- 我加入的 -->
              <span v-if="circleCurrent == 1"
                >{{
                  item.circle_follow_count > 10000
                    ? item.circle_follow_count / 10000 + "W"
                    : item.circle_follow_count > 1000
                    ? item.circle_follow_count / 1000 + "K"
                    : item.circle_follow_count
                }}人加入</span
              >
            </div>
            <div
              class="gogin click f-j-a-c"
              @click.stop="getfoucecircle(circleCurrent, item)"
            >
              {{ circleCurrent == 0 ? "加入" : "查看" }}
            </div>
          </div>
        </div>
      </div>
      <div class="morehottitle click f-j-a-c f-a-c" @click="morecricle">
        <span>更多好玩圈子</span>
        <svg-icon name="icon-sq-gd"></svg-icon>
      </div>
    </div>
    <!-- 热门用户 -->
    <div class="hotuser" v-if="user">
      <div class="hottitle">热门用户</div>
      <div
        class="hotitem f-a-c"
        v-for="(item, index) in hotinfo"
        :key="index"
        @click.stop="toUserInfo(item)"
      >
        <userAvatar
          :userImgs="item.user_avatar"
          :showDv="item.is_authentication == 1"
          :imgWidth="40"
          :divWidth="46"
        ></userAvatar>

        <div class="hotcontent f-d-c">
          <div class="f-a-c">
            <span>{{ item.user_name }}</span>
            <svg-icon
              name="icon-guanfang"
              style="
                width: 20px;
                height: 20px;
                margin-left: 5px;
                margin-right: 5px;
              "
              v-if="item.is_official == 1"
            ></svg-icon>
          </div>
          <span class="ellipsis" style="display: block; width: 200px">{{
            item.user_introduce
          }}</span>
        </div>
        <!-- <div class="quantity">
          <span>{{ item.like_count }}篇内容</span>
        </div> -->
      </div>
    </div>
    <!-- 交流二维码 -->
    <div class="ercode f-a-c f-j-a-c" v-if="ercode">
      <div class="code f-d-c f-j-a-c">
        <img src="https://img.chongyeapp.com/qrcode/minipro.jpg" alt="" />
        <span> 小程序 </span>
      </div>
      <div class="code f-d-c f-j-a-c">
        <img src="https://img.chongyeapp.com/pc/gzh_code.jpg" alt="" />
        <span> 公众号 </span>
      </div>
    </div>
  </div>
</template>
<script>
import { ElMessage } from "element-plus";
import userAvatar from "@/components/userAvatar.vue";

import {
  Mycircle,
  nearlyAndfollows,
  byplateid,
  foucecircle,
  followNow,
  gettags,
  users,
} from "@/axios/community.js";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import {
  defineComponent,
  reactive,
  toRefs,
  onUnmounted,
  onMounted,
  computed,
  getCurrentInstance,
  inject,
} from "vue";
export default defineComponent({
  
  props: {
    is_follow_user: {
      // 判断圈主是否被关注
      type: Boolean,
      default: false,
    },
    speak: {
      // 圈主详情
      type: Object,
      default: {},
    },
    circleInfo: {
      type: Object,
      default: {},
    },
    circlyDatalist: {
      // 圈主list
      type: Array,
      default: [],
    },
    DataOverview: {
      // 数据总览
      type: Boolean,
      default: false,
    },
    Member: {
      // 成员
      type: Boolean,
      default: false,
    },
    intro: {
      // 简介
      type: Boolean,
      default: false,
    },
    quanzhu: {
      // 圈主
      type: Boolean,
      default: false,
    },
    friendcommunity: {
      // 推荐圈子
      type: Boolean,
      default: false,
    },
    hejoin: {
      // 他加入的
      type: Boolean,
      default: false,
    },
    Personal: {
      // 个人成就
      type: Boolean,
      default: false,
    },
    hot: {
      // 热门话题
      type: Boolean,
      default: false,
    },
    token: {
      // 话题发起人
      type: Boolean,
      default: false,
    },
    user: {
      // 热门用户
      type: Boolean,
      default: false,
    },
    ercode: {
      // 二维码
      type: Boolean,
      default: false,
    },
    ringmaster: {
      type: Array,
      default: () => [],
    }, //圈住信息
    PersonalData: {
      type: Object,
      default: () => {},
    },
  },
  components: {
    userAvatar,
  },
  setup(props, { attrs, slots, emit }) {
    let minToken = computed(() => {
      return store.state.minToken;
    });
    const router = useRouter();
    const reload = inject("reload");
    const { proxy } = getCurrentInstance();
    const store = useStore();
    let data = reactive({
      hotUser: [],
      DataOverviewlist: [
        {
          title: "关注的话题",
          num: 0,
        },
        {
          title: "关注的圈子",
          num: 0,
        },
        {
          title: "给他人充电",
          num: 0,
        },
        {
          title: "收到的充电",
          num: 0,
        },
      ],
      communityList: [],
      circleList: [
        {
          title: "推荐圈子",
        },
        {
          title: "我加入的",
        },
        {
          title: "我创建的",
        },
      ],
      circleCurrent: 0, //选择圈子标题
      circlemap: [],
      hotinfo: [],
      PersonalList: [
        {
          svg: "icon-neirong",
          title: "发布了",
          title1: "篇内容",
          key: "community",
        },
        {
          svg: "icon-dianzan",
          title: "获得了",
          title1: "次点赞",
          key: "likeTotal",
        },
        // {
        //   svg: "icon-pinglun",
        //   title: "获得了",
        //   title1: "次评论",
        // },
      ],
    });

    // 当前登录用户信息
    let userInfo = computed(() => {
      return store.state.minUserInfo;
    });

    // 热门话题
    let hottitle = () => {
      let id = "?tag_id=0&page=1";
      gettags({ id }).then((res) => {
        res.data.data.forEach((item, index) => {
          if (index < 3) {
            item.color = "#FF5547";
            item.hot = true;
          }
          if (index <= 10) {
            data.communityList.push(item);
          }
        });
        // console.log(data.communityList);
      });
    };
    // 获取用户信息
    let getusers = () => {
      let id = "?type=6";
      users({ id }).then((res) => {
        data.hotinfo = res.data.data.slice(0, 5);
      });
    };
    // 关注以及取消关注
    let gofollowNow = (item) => {
      followNow({ posts_user_id: item.id }).then((res) => {
        ElMessage.success("关注成功");
        item.is_follow_user = !item.is_follow_user;
      });
    };
    // 选择圈子标题
    let circleListClick = (item, index) => {
      data.circleCurrent = index;
      data.circlemap = [];
      if (index == 2) {
        myCreatequanzi();
      } else if (index == 1) {
        getfouct();
      } else {
        getbyplateid();
      }
    };
    // 更多热门话题
    let gohot = () => {
      if (!userInfo.value) {
        return ElMessage.warning("请先登录");
      }

      router.push("/hotcommunity");
    };
    // 更多圈子
    let morecricle = () => {
      if (!userInfo.value) {
        return ElMessage.warning("请先登录");
      }


      let url;
      // if (data.circleCurrent == 0) {
      url = "morecircle";
      // } else {
      //   url = "userdetailCommunity";
      // }
      router.push({
        path: url,
        query: {
          type: data.circleCurrent,
          my: true,
        },
      });
    };
    // 推荐圈子
    let getbyplateid = () => {
      data.circlemap = [];
      let id = "?plate_id=-1";
      byplateid({ id }).then((res) => {
        let datalist = res.data;
        let nums = 0;
        datalist.forEach((item, index) => {
          if (item.is_follow_circle == false) {
            nums++;
            if (nums <= 3) {
              data.circlemap.push(item);
            }
          }
        });
      });
    };
    // 我的关注圈子
    let getfouct = () => {
      if (!userInfo.value) {
        return ElMessage.warning("请先登录");
      }

      nearlyAndfollows().then((res) => {
        res.data.follow.forEach((item, index) => {
          if (index < 3) {
            data.circlemap.push(item);
          }
        });
      });
    };
    // 加入圈子
    let getfoucecircle = (circleCurrent, item) => {
      if (!minToken.value) {
        return ElMessage.warning("请先进行登录");
      }
      if (circleCurrent == 0) {
        foucecircle({ circle_id: item.id }).then((res) => {
          ElMessage.success("加入成功");
          getbyplateid();
        });
      } else {
        router.push({
          path: "/pages/circle/list",
          query: { id: item.id },
        });
      }
    };
    // 我创建的圈子
    let myCreatequanzi = () => {
      if (!userInfo.value) {
        return ElMessage.warning("请先登录");
      }

      Mycircle().then((res) => {
        let datalist = res.data;
        datalist.forEach((item, index) => {
          if (index < 3) {
            data.circlemap.push(item);
          }
        });
      });
    };

    // 前往话题详情
    let toCommunityDetail = (item) => {
      console.log(item.id);
      if (!userInfo.value) {
        return ElMessage.warning("请先登录");
      }

      if (!userInfo.value) {
        return ElMessage.warning("请先登录");
      }

      router.push({
        path: "/pages/sticky/sticky",
        query: {
          id: item.id,
        },
      });
    };

    // 前往圈子详情
    let toCircleDetail = (item) => {
      if (!userInfo.value) {
        return ElMessage.warning("请先登录");
      }

      router.push({
        path: "/pages/circle/list",
        query: {
          id: item.id,
        },
      });
    };

    // 查看用户详情
    let toUserInfo = (item) => {
      if (!userInfo.value) {
        return ElMessage.warning("请先登录");
      }

      router.push({
        path: "/pages/user/user",
        query: {
          id: item.id,
        },
      });
      reload();
    };

    onMounted(() => {
      if (props.hot) {
        hottitle();
      }

      setTimeout(() => {
        getbyplateid();
        if (store.state.minUserInfo) {
          getusers();
        }
      }, 800);

    });
    return {
      minToken,
      toUserInfo,
      toCircleDetail,
      userInfo,
      toCommunityDetail,
      getusers,
      hottitle,
      gofollowNow,
      getfoucecircle,
      getbyplateid,
      getfouct,
      myCreatequanzi,
      morecricle,
      gohot,
      circleListClick,
      ...toRefs(data),
    };
  },
});
</script>
<style lang="scss" scoped>
.dengjiLV {
  background-color: #a1efc1;
  font-size: 14px;
  color: #fff;
  padding: 0 5px;
  border-radius: 5px;
}
.canjoin {
  background: #f3f4f5 !important;
  color: #656f79 !important;
}
.Member {
  padding: 20px;
  background-color: #fff;
  margin-bottom: 10px;
  border-radius: 10px;
  .membertitle {
    font-size: 14px;
    font-family: Microsoft YaHei-Bold, Microsoft YaHei;
    font-weight: 700;
    color: #000000;
    > span {
      font-size: 14px;
      font-family: Microsoft YaHei-Bold, Microsoft YaHei;
      font-weight: 700;
      color: #64c8dc;
    }
  }
}
.intro {
  padding: 20px;
  background-color: #fff;
  margin-bottom: 10px;
  border-radius: 10px;
  .introtitle {
    font-size: 14px;
    font-family: Microsoft YaHei-Bold, Microsoft YaHei;
    font-weight: 700;
    color: #000000;
  }
  .introcontent {
    margin-top: 20px;
    font-size: 14px;
    font-family: Microsoft YaHei-Regular, Microsoft YaHei;
    font-weight: 400;
    color: #656f79;
    width: 100%;
  }
  .introtime {
    margin-top: 10px;
    font-size: 14px;
    font-family: Microsoft YaHei-Regular, Microsoft YaHei;
    font-weight: 400;
    color: #656f79;
  }
}
.hejoin {
  background-color: #fff;
  margin-bottom: 10px;
  border-radius: 10px;
  padding: 20px;
  .hejointitle {
    font-size: 14px;
    font-family: Microsoft YaHei-Bold, Microsoft YaHei;
    font-weight: 700;
    color: #000;
  }
  .hejoinbox {
    .huati {
      margin-top: 10px;

      font-size: 14px;
      font-family: Microsoft YaHei-Regular, Microsoft YaHei;
      font-weight: 400;
      color: #000000;
    }
    .huatiitem {
      flex-wrap: wrap;
      .huatispan {
        margin-top: 10px;
        width: 48%;
        height: 30px;
        background: #f3f4f5;
        border-radius: 6px 6px 6px 6px;
        opacity: 1;
        font-size: 14px;
        font-family: Microsoft YaHei-Regular, Microsoft YaHei;
        font-weight: 400;
        color: #656f79;
      }
    }
  }

  .quanzibox {
    .quanitem {
      margin-top: 10px;
      .left {
        > img {
          width: 60px;
          height: 60px;
          border-radius: 10px 10px 10px 10px;
          opacity: 1;
        }
      }
      .right {
        margin-left: 10px;

        .quanzitop {
          > span {
            font-size: 14px;
            font-family: Microsoft YaHei-Bold, Microsoft YaHei;
            font-weight: 700;
            color: #000000;
          }
        }
        .quanzibottom {
          margin-top: 10px;
          > span {
            font-size: 12px;
            font-family: Microsoft YaHei-Regular, Microsoft YaHei;
            font-weight: 400;
            color: #656f79;
          }
        }
      }
    }
  }
}

.Personal {
  background-color: #fff;
  margin-bottom: 10px;
  border-radius: 10px;
  padding: 20px;
  .Personaltitle {
    font-size: 14px;
    font-family: Microsoft YaHei-Bold, Microsoft YaHei;
    font-weight: 700;
    color: #000000;
  }
  .Personalitem {
    margin-top: 21px;
    span {
      font-size: 14px;
      font-family: Microsoft YaHei-Regular, Microsoft YaHei;
      font-weight: 400;
      color: #000000;
    }
  }
}

.token {
  margin-bottom: 10px;
  border-radius: 10px;
  width: 300px;
  padding: 20px;
  height: 140px;
  background-color: #fff;
  .tokentitle {
    font-size: 14px;
    font-family: Microsoft YaHei-Bold, Microsoft YaHei;
    font-weight: 700;
    color: #000000;
  }
}
.tokenitem {
  margin-top: 20px;
  cursor: pointer;

  .actice {
    > img {
      width: 48px;
      height: 48px;
      border-radius: 50px;
    }
  }
  .name {
    margin-left: 12px;
    .namefou {
      > span {
        font-size: 14px;
        font-family: Microsoft YaHei-Bold, Microsoft YaHei;
        font-weight: 700;
        color: #000000;
      }
    }
    > span {
      display: block;
      width: 200px;
      font-size: 14px;
      font-family: Microsoft YaHei-Regular, Microsoft YaHei;
      font-weight: 400;
      color: #656f79;
    }
  }
  .fouct {
    width: 60px;
    height: 26px;
    background: linear-gradient(90deg, #9ed8e6 0%, #a1f0c0 100%);
    border-radius: 6px 6px 6px 6px;
    opacity: 1;
    font-size: 14px;
    font-family: Microsoft YaHei-Regular, Microsoft YaHei;
    font-weight: 400;
    color: #ffffff;
  }
  .nofouct {
  }
}

.nomargin {
  margin-top: 0 !important;
}
.communityRight-box {
  width: 300px;
  background-color: #f9f9f9;
  .communitybox {
    width: 100%;
    // width: 300px;
    // height: 420px;
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    .communityspan {
      font-size: 14px;
      font-family: Microsoft YaHei-Bold, Microsoft YaHei;
      font-weight: 700;
      color: #000000;
    }
    .communityitem {
      width: 259px;

      .item {
        margin-top: 20px;
        cursor: pointer;
        span {
          font-size: 14px;
          color: #fab030;
        }
        .font {
          > span {
            &:last-child {
              display: block;
              // width: 260px;
              margin-left: 10px;
              color: #000;
            }
          }
        }
        .type {
          color: #fff;
          padding: 2px 3px;
          border-radius: 5px;
        }
        justify-content: space-between;
        &:last-child {
          padding-bottom: 20px;
          border-bottom: 1px solid #f5f6f7;
        }
      }
    }
  }
  .morehottitle {
    margin-top: 20px;
    > span {
      font-size: 12px;
      font-family: Microsoft YaHei-Regular, Microsoft YaHei;
      font-weight: 400;
      color: #656f79;
    }
  }
}
.friendcommunity {
  // width: 100%;

  border-radius: 10px;
  margin-top: 10px;
  width: 300px;
  padding: 20px;
  background-color: #fff;
  .frendtitle {
    .frendcolor {
      color: #65c8dc !important;
    }
    .frienditem {
      font-size: 14px;
      font-family: Microsoft YaHei-Bold, Microsoft YaHei;
      font-weight: 700;
      color: #000000;
    }
  }
  .friendbox {
    border-bottom: 1px solid #f5f6f7;
    padding-bottom: 20px;
    margin-top: 15px;
    .mobanbox {
      width: 260px;
      height: 160px;
      background-color: rgba(0, 0, 0, 0.5);
      position: absolute;
      border-radius: 10px;
      top: 0;
    }
    .boxitem {
      position: relative;
      // background-image: url('../../../../assets/image/qzbj.jpg');
      margin-top: 20px;
      width: 260px;
      height: 160px;
      border-radius: 10px 10px 10px 10px;
      background-size: 100% 100%;
      cursor: pointer;

      &:first-child {
        margin-top: 0;
      }
      .contentitem {
        position: relative;
        z-index: 10;
        padding: 10px;
        .contenttitle {
          font-size: 14px;
          font-family: Microsoft YaHei-Bold, Microsoft YaHei;
          font-weight: 700;
          color: #ffffff;
        }
        .avatar {
          margin: 0px 0 10px 0;
          .avatarimg {
            width: 30px;
            height: 30px;
            > img {
              border-radius: 50%;

              width: 100%;
              height: 100%;
            }
            margin-left: -10px;
            &:first-child {
              margin-left: 0;
            }
          }
          @for $i from 1 through 5 {
            .avatarimg:nth-child(#{$i}) {
              z-index: $i;
            }
          }
        }
        .rightType {
          position: absolute;
          top: 0;
          right: 0;
          width: 38px;
          height: 20px;
          background: #fab030;
          border-radius: 0px 10px 0px 10px;
          opacity: 1;
          > span {
            font-size: 12px;
            font-family: Microsoft YaHei-Regular, Microsoft YaHei;
            font-weight: 400;
            color: #ffffff;
          }
        }
        .infocontent {
          > span {
            font-size: 12px;
            font-family: Microsoft YaHei-Regular, Microsoft YaHei;
            font-weight: 400;
            color: #ffffff;
            margin-right: 10px;
          }
        }
        .gogin {
          margin-top: 60px;
          width: 60px;
          height: 26px;
          background: #ffffff;
          border-radius: 140px 140px 140px 140px;
          opacity: 1;
          > span {
            font-size: 14px;
            font-family: Microsoft YaHei-Regular, Microsoft YaHei;
            font-weight: 400;
            color: #000000;

            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
          }
        }
      }
    }
  }
}
.hotuser {
  width: 300px;
  margin-top: 10px;
  background-color: #fff;
  padding: 20px;
  .hottitle {
    font-size: 14px;
    font-family: Microsoft YaHei-Bold, Microsoft YaHei;
    font-weight: 700;
    color: #000000;
  }
  .hotitem {
    align-items: flex-start;
    margin-top: 30px;
    cursor: pointer;
    > img {
      width: 48px;
      height: 48px;
      border-radius: 50%;
    }
    .hotcontent {
      margin-left: 12px;
      > span {
        &:first-child {
          font-size: 14px;
          font-family: Microsoft YaHei-Bold, Microsoft YaHei;
          font-weight: 700;
          color: #000000;
        }
        &:last-child {
          margin-top: 10px;
          font-size: 14px;
          font-family: Microsoft YaHei-Regular, Microsoft YaHei;
          font-weight: 400;
          color: #656f79;
        }
      }
    }
    .quantity {
      margin-left: 12px;

      > span {
        font-size: 14px;
        font-family: Microsoft YaHei-Bold, Microsoft YaHei;
        font-weight: 500;
        color: #656f79;
      }
    }
    &:first-child {
      margin-top: 15px;
    }
  }
}
.ercode {
  margin-top: 10px;
  border-radius: 10px;
  background-color: #fff;
  width: 300px;
  padding: 20px;
  .code {
    > img {
      width: 100px;
      height: 100px;
    }
    > span {
      font-size: 12px;
      font-family: Microsoft YaHei-Regular, Microsoft YaHei;
      font-weight: 400;
      color: #000000;
    }
  }
}
</style>
